/* desc: 商品详情页*/
<template>
  <transition name="foodShow">
    <div class="food" v-show="flagShow" ref="food">
      <div class="food-content">
        <div class="img-header">
          <img :src="food.image" alt />
          <div class="back" @click="hide">
            <i class="icon-arrow_lift"></i>
          </div>
        </div>
        <div class="content">
          <div class="title">{{food.name}}</div>
          <div class="detail">
            <span class="sell-count">月售{{food.sellCount}}份</span>
            <span class="rating">好评率{{food.rating}}%</span>
          </div>
          <div class="price">
            <span class="now">¥{{food.price}}</span>
            <span class="oldPrice" v-if="food.oldPrice">¥{{food.oldPrice}}</span>
          </div>
          <!-- 购物车增减组件 -->
          <div class="cartcontrol-wrapper">
            <cartcontrol :food="food" ref="cartcontrol"></cartcontrol>
          </div>
          <!-- 加入购物车 -->
          <transition name="cart">
            <div class="buy" v-show="!food.count || food.count==0" @click="addFirst">加入购物车</div>
          </transition>
        </div>
        <split v-show="food.info"></split>
        <!-- 商品信息 -->
        <div class="info" v-show="food.info">
          <h1 class="title">商品信息</h1>
          <p class="text">{{food.info}}</p>
        </div>
        <split v-show="food.info"></split>
        <!-- 评论部分 -->
        <ratingselect
          :select-type="selectType"
          :desc="desc"
          :onlyContent="onlyContent"
          :ratings="food.ratings"
          @selectTypeChange="selectTypeChange"
          @toggleContent="toggleContent"
        ></ratingselect>
        <!-- 商品详情里的评论列表 -->
        <div class="rating-wrapper">
          <ul v-if="food.ratings && food.ratings.length">
            <li
              class="rating-item"
              v-for="(rating,index) in food.ratings"
              :key="index"
              v-show="needShow(rating.rateType,rating.text)"
            >
              <div class="rating-user">
                <p class="time">{{rating.rateTime | formatDate}}</p>
                <p class="user">
                  <span>{{rating.rateTime}}</span>
                  <img :src="rating.avatar" class="user-pic" />
                </p>
              </div>
              <p class="rating-content">
                <span
                  :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1 }"
                ></span>
                <span class="text">{{rating.text}}</span>
              </p>
            </li>
          </ul>
          <div v-else class="no-rating">暂无评论</div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import Vue from "vue";
import BScroll from "better-scroll"; // 引入betterscroll
import cartcontrol from "../cartcontrol/cartcontrol"; // 引入增减按钮
import split from "../split/split"; // 引入分隔组件
import ratingselect from "../ratingselect/ratingselect"; // 引入评价组件
const POSITIVE = 0; // 查看全部评价
const NEGATIVE = 1; // 查看差评
const ALL = 2; // 查看好评
export default {
  name: "",
  props: {
    food: {
      type: Object
    }
  },
  components: {
    cartcontrol, // 增减按钮组件
    split, // 间隔组件
    ratingselect // 评价组件
  },
  filters: {
    // 时间过滤器
    formatDate(time) {
      let dt = new Date(time);
      var y = dt.getFullYear();
      var m = dt.getMonth() + 1;
      var d = dt.getDate();
      return y + "-" + m + "-" + d;
    }
  },
  data() {
    return {
      flagShow: false, // 详情页是否显示
      selectType: ALL, // 选择评价类型
      onlyContent: false, // 只看有内容的评价
      desc: {
        all: "全部",
        positive: "满意",
        negative: "吐槽"
      }
    };
  },
  methods: {
    show() {
      this.flagShow = true; // 显示详情页
      this.selectType = 2; // 默认全部评价
      this.onlyContent = true; // 默认只看有内容的评价
    },
    // 关闭详情页
    hide() {
      this.flagShow = false;
    },
    // 初始化滚动条
    _initScroll() {
      this.scroll = new BScroll(this.$refs.food, {
        click: true,
        mouseWheel: true
      });
    },
    // 点击“添加购物车”
    addFirst() {
      Vue.set(this.food, "count", 1); // 或者使用下面的代码
      // this.$refs.cartcontrol.addCart();  // 父组件调用子组件里的方法
    },
    // 切换选择类型(改变评价类型)
    selectTypeChange(data) {
      console.log(data);
      this.selectType = data;
    },
    // 切换只查看有内容的评论
    toggleContent() {
      this.onlyContent = !this.onlyContent;
    },
    // 切换隐藏显示好评、全部、差评
    needShow(type, text) {
      if (this.onlyContent && !text) {
        // 只看有内容和的评论
        return false;
      } else if (this.selectType === ALL) {
        // 全部查看
        return true;
      } else if (type === 0 && this.selectType === 0) {
        // 满意的评价
        return true;
      } else {
        // 如果选中的类型和评价类型相同
        return type === this.selectType;
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this._initScroll();
    });
  }
};
</script>
<style lang='stylus' scoped>
.food {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  bottom: 46px;
  background-color: #fff;
  z-index: 1;

  .food-content {
    position: relative;

    // overflow: auto;

    // 上面的图片
    .img-header {
      position: relative;
      width: 100%;
      height: 0;
      padding-top: 100%; // padding-top继承的width的宽度(防止高度从无到有的抖动)

      img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      // 返回按钮
      .back {
        position: absolute;
        top: 10px;
        left: 0;

        .icon-arrow_lift {
          display: block;
          padding: 10px;
          font-size: 20px;
          color: #fff;
        }
      }
    }

    .content {
      position: relative;
      padding: 18px;

      .title {
        height: 14px;
        line-height: 14px;
        color: rgb(7, 17, 27);
        font-weight: 700;
        margin-bottom: 8px;
      }

      .detail {
        font-size: 0;
        height: 10px;
        line-height: 10px;
        margin-bottom: 18px;

        .sell-count, .rating {
          color: rgb(147, 153, 159);
          font-size: 10px;
        }

        .sell-count {
          margin-right: 12px;
        }
      }

      .price {
        font-weigth: 700;
        line-height: 24px;
        font-size: 0;

        // 新价格
        .now {
          font-size: 14px;
          margin-right: 8px;
          color: rgb(240, 20, 20);
        }

        // 老价格
        .oldPrice {
          text-decoration: line-through;
          font-size: 10px;
          font-weight: 700;
          color: rgb(147, 153, 159);
        }
      }

      // 增减组件
      .cartcontrol-wrapper {
        position: absolute;
        bottom: 20px;
        right: 18px;
      }

      // 加入购物车
      .buy {
        position: absolute;
        bottom: 22px;
        right: 18px;
        width: 74px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 24px;
        font-size: 10px;
        color: #ffffff;
        background: rgb(0, 160, 220);
      }
    }

    // 商品信息
    .info {
      padding: 18px;

      .title {
        margin-bottom: 6px;
        font-size: 16px;
        color: rgb(7, 17, 27);
        line-height: 14px;
      }

      .text {
        padding-left: 8px;
        font-size: 12px;
        font-weight: 200;
        color: rgb(77, 85, 93);
        line-height: 24px;
      }
    }

    .rating-wrapper {
      margin: 0 18px;

      .rating-item {
        padding: 16px 0;
        border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      }

      .rating-user {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 10px;
        color: rgb(147, 153, 159);
        line-height: 12px;

        .user {
          .user-pic {
            width: 12px;
            height: 12px;
            margin-left: 6px;
            border-radius: 50%;
            vertical-align: middle;
          }

          span {
            vertical-align: middle;
          }
        }
      }

      .rating-content {
        text-align: left;

        .icon-thumb_up, .icon-thumb_down {
          font-size: 12px;
          line-height: 24px;
          vertical-align: middle;
        }

        .icon-thumb_up {
          color: rgb(0, 160, 220);
        }

        .icon-thumb_down {
          color: rgb(147, 153, 159);
        }

        .text {
          font-size: 12px;
          color: rgb(7, 17, 27);
          line-height: 24px;
        }
      }
    }

    // 暂无评价
    .no-rating {
      padding: 16px 0;
      font-size: 12px;
      text-align: left;
      color: rgb(147, 153, 159);
    }
  }
}

// 商品详情动画
.foodShow-enter-active, .foodShow-leave-active {
  opacity: 1;
  transition: all 1s linear;
  transform: translate3d(0%, 0, 0);
}

.foodShow-enter, .foodShow-leave-to {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

/* 加入购物车动画 */
.cart-enter-active, .cart-leave-active {
  transition: all 1s ease;
  opacity: 1;
}

.cart-enter, .cart-leave-to {
  opacity: 0;
}
</style>
